<template>
  <div class="bgColorF pd10" :style="{ height: pcHeight }">
    <!--查询条件-->
    <div class="">
      <el-form label-suffix="：" :inline="true" size="small" :model="searchForm">
        <el-form-item label="查询">
          <el-input v-model="searchForm.searchVal" clearable maxlength="50" class="w200"
            placeholder="请输入查询内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitSearch"> 查询 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--数据列表-->
    <div class="table-margin">
      <el-table ref="multipleTable" v-loading="dataLoading" size="small" border :data="tableData" tooltip-effect="light"
        style="width: 100%" :header-cell-style="{ background: '#f6f6f6' }" :max-height="pcHeight2" highlight-current-row
        :default-sort="{ prop: 'date', order: 'descending' }" :empty-text="loadingDataMsg">
        <el-table-column label="序号" align="center" fixed type="index" width="70" :index="indexMethod">
        </el-table-column>
        <el-table-column label="省编号" prop="province_code" sortable align="center" min-width="200">
        </el-table-column>
        <el-table-column label="省名称" prop="province_name" sortable align="center" min-width="200">
        </el-table-column>
        <el-table-column prop="create_time" label="新增时间" align="center" width="170" sortable show-overflow-tooltip>
          <template v-slot="scope">
            {{
              scope.row.create_time
                ? proxy
                  .$moment(scope.row.create_time * 1000)
                  .format("YYYY-MM-DD HH:mm:ss")
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="90" align="center">
          <template v-slot="scope">
            <el-button size="small" type="primary" plain> 编辑 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="textC mgT10" v-if="total > 0">
      <el-pagination background size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[30, 50, 70, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  watch,
  getCurrentInstance,
} from "vue";

import { ElMessage } from "element-plus";

import sso from "@/store/api/sso";

const { proxy } = getCurrentInstance() as any;

const pcHeight = ref(document.body.clientHeight - 60 + "px");
const pcHeight2 = ref(document.body.clientHeight - 90);
const dataLoading = ref(true);
const loadingDataMsg = ref("数据加载中...");
const total = ref(0);
const currentPage = ref(1); //当前第几页
const pageSize = ref(process.env.pageNum || 30); //每页条数
const tableData = ref([]);
const searchForm = reactive({
  searchVal: "",
});

onMounted(() => {
  getDataList();
});

const indexMethod = (index: number) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};

const submitSearch = () => {
  loadingDataMsg.value = "数据加载中...";
  total.value = 0;
  currentPage.value = 1;
  tableData.value = [];
  getDataList();
};

const getDataList = async () => {
  dataLoading.value = true;
  loadingDataMsg.value = "数据加载中...";
  const obj = {
    searchForm: JSON.stringify(searchForm),
    page: currentPage.value,
    pageSize: pageSize.value,
  };
  const tmpResult: any = await sso.apiRegion(obj);

  if (tmpResult.code != 0) {
    ElMessage({
      type: "error",
      message: tmpResult.msg,
    });
    return false;
  }
  total.value = tmpResult.data.count;
  tableData.value = tmpResult.data.count ? tmpResult.data.list : [];

  loadingDataMsg.value = total.value > 0 ? "" : "没有数据";
  dataLoading.value = false;
};

const handleSizeChange = (val: any) => {
  loadingDataMsg.value = "数据加载中...";
  total.value = 0;
  currentPage.value = 1;
  tableData.value = [];
  pageSize.value = val;
  getDataList();
};

const handleCurrentChange = (val: any) => {
  loadingDataMsg.value = "数据加载中...";
  total.value = 0;
  currentPage.value = val;
  tableData.value = [];
  getDataList();
};

onUnmounted(() => { });
</script>
